<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div2{
            margin:25px;
            width: 250px;
            border: 2px solid red;
        }
        .hero{
            display: inline-block;
            width: 60px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            border-left: 1px solid greenyellow;
        }
        /*控制边框*/
        .hero :first-child{
            border-left: none;
        }
        .row{
            border-bottom:1px solid greenyellow;
        }
        /*控制背景色，隔行换色*/
        .row:nth-child(2n){
            background-color:rgb(236, 147, 147);
        }
        .row:nth-child(2n+1){
            background-color:rgb(187, 177, 177);
        }
        .row :last-child{
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
        //九九乘法表
        let nowonly;
        nowonly='';
        for(let x=1;x<=9;x++){
            for(let y=1;y<=x;y++){
                nowonly += y+'*'+x+'='+y*x+'. . . .'; 
            }
            nowonly += '<br>';
        }
        div1.innerHTML=nowonly;

        //座位排名表
        //div可以使用table tr td
        let stuArr = [
            ['松江','无用','卢俊义','公孙胜'],
            ['关胜','临城','柴进','花和尚'],
            ['孙二娘','扈三娘','顾大嫂','潘金莲'],
            ['高金','蔡京','潼关','宋徽宗'],
            ['江','无','卢','胜'],
        ]
        let stuobj={
            data:{
                list:stuArr
            }
        }
        //stuArr=stuobj.data.list，两者调用的是同一个对象
        let heroText = '';
        for(let row=0;row<stuArr.length;row++){
            heroText+=`<div class="row">`;
            for (let i=0;i<4;i++){
                heroText+=`<span class="hero">${stuArr[row][i]}</span>`;
            }
            heroText+=`</div>`;
        }
        div2.innerHTML = heroText;
    </script>
</body>
</html>